<template>
  <div class="DeviceViewDetails">
    <h5>设备租赁详情</h5>
    <div class="cus-table">
      <el-table :data="Bindata" :header-cell-style="headerRowStyle">
        <el-table-column label="使用用户" prop="test" />
        <el-table-column label="手机号码" prop="test" />
        <el-table-column label="状态" prop="test" />
        <el-table-column label="使用开始时间" prop="test" />
        <el-table-column label="使用结束时间" prop="test" />
        <el-table-column label="使用时长" prop="test" />
        <el-table-column label="费用" prop="test" />
      </el-table>
    </div>
    <div class="ele-div-2">
      <div class="left" />
      <div class="right">
        <el-pagination
          :current-page="pages.pageIndex"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="pages.pageSzie"
          layout="total,sizes,prev,pager,next,jumper"
          :total="pages.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { EquipmentDetal } from '@/api/customAPI/shop/store'
export default {
  name: 'DeviceViewDetails',
  data() {
    return {
      Bindata: [{ test: 'test' }],
      pages: {
        pageIndex: 1,
        pageSzie: 10,
        total: 0
      }
    }
  },
  methods: {
    InititalInfo() {
      EquipmentDetal({
        equipmentID: '',
        page: this.pages.pageIndex,
        limit: this.pages.pageSzie
      })
        .then(result => {
          this.Bindata = result.data.data.list
          this.pages.total = result.data.data.total
        })
    },
    /** 表头样式 */
    headerRowStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f3f3f3'
      } else {
        return ''
      }
    },
    handleSizeChange() {},
    handleCurrentChange() {}
  }
}
</script>

<style lang="scss" scoped>
.DeviceViewDetails {
  padding: 50px 100px;
  .cus-table {
    margin-top: 40px;
  }
  .ele-div-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
  }
}
</style>
